<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="Js/jquery-2.1.0.js" type="text/javascript"></script>
    <script src="Js/jquery-async.js" type="text/javascript"></script>
    <script src="Js/vue.js" type="text/javascript"></script>
    <script type="text/javascript">
        !async function () {
            await $.readyAsync();
            new Vue({
                el: "#page",
                data() {
                    return {
                        bearerToken: "",
                        baseUrl:"http://localhost:8180/mybatis-spring/"
                    }
                },
                methods: {
                    async loginClick() {
                        this.setToken("");
                        let backData = await $.ajaxAsync(this.baseUrl+"oauth/token", {
                            type: "post",
                            data: {
                                //username:"user_1",
                                //password:"123456",
                                //grant_type:"password",
                                grant_type: "client_credentials",
                                scope: "trust",
                                client_id: "my-trusted-client",
                                client_secret: "secret"
                            }
                        });
                        console.log("返回结果：%o", backData.data);
                        bearerToken = "Bearer " + backData.data.value;
                        this.setToken(bearerToken);
                    },
                    setToken(bearerToken) {
                        let beforeSend;
                        if (bearerToken) {
                            beforeSend = xhr => xhr.setRequestHeader("Authorization", bearerToken);
                        }
                        else{
                            beforeSend = xhr => {};
                        }
                        $.ajaxSetup({
                            beforeSend: beforeSend
                        });
                    },
                    async getPersons() {
                        let backData = await $.getAsync(this.baseUrl+"api/persons");
                        console.log("返回结果：%o", backData.data);
                    },
                    async editPersons(){
                    	let backData = await $.ajaxAsync(this.baseUrl+"api/persons",{
                    		type:"put",
                    		data:JSON.stringify({
                    			id:12,
                    			name:"李四",
                    			age:20,
                    			birthdayString:"2018-5-8"
                    		})
                    	});
                    	console.log("返回结果：%o", backData.data);
                    }
                }
            });
        }();
    </script>
</head>

<body>
<div id="page">
    <input type="button" value="登录" @click="loginClick"/>
    <input type="button" value="获取人员" @click="getPersons"/>
    <input type="button" value="修改人员" @click="editPersons"/></div>
</body>

</html>